<template>
  <div class="container">
    <el-container>
      <el-aside :width="isCollapse? '220px': '65px'" class="aside">
        <!-- 侧边栏顶部Logo区域 -->
        <div class="sidebar-header">
          <div class="sidebar-logo-container">
            <img src='../../assets/logo.png' alt="Company Logo" class="sidebar-logo" />
            <span class="sidebar-title" v-show="isCollapse">氮化镓紫外局放监测系统</span>
          </div>
        </div>
        <el-menu
           class="el-menu-vertical-demo"
           background-color="#333744"
            text-color="#fff"
            :default-active="activeIndex"
            active-text-color="#6cb2fd"
            router
        >
          <el-menu-item v-for="item in noChildMenu" :key="item.id" :index="item.path" @click="addTab(item)">
             <el-icon><component :is="item.icon"></component></el-icon>
             <template #title>{{ $t(item.title) }}</template>
          </el-menu-item>
          <el-sub-menu v-for="item in hasChildMenu" :key="item.id">
             <template #title>
                <el-icon><component :is="item.icon"></component></el-icon>
                <span>{{ $t(item.title) }}</span>
             </template>
             <el-menu-item v-for="e in item.children" :key="e.id" :index="e.path" @click="addTab(e)">
                  <el-icon>
                    <component :is="e.icon"></component>
                  </el-icon>
                  <span slot="title">{{ $t(e.title) }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-header>
          <aside>
              <el-button icon="Menu" @click="toggleCollpase"></el-button>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="e in titleList" :to="e.path">{{ $t(e.title) }}</el-breadcrumb-item>
              </el-breadcrumb>
          </aside>
          <aside>
            <!-- 信息可读 -->
            <div class="info">
              <template v-if="indexDbNum > 0">
                <el-badge :value="indexDbNum" @click="openErrorList">
                  <el-icon size="24px"><BellFilled /></el-icon>
                </el-badge>
              </template>
              <template v-else>
                  <el-icon size="24px" @click="noError"><BellFilled /></el-icon>
              </template>
            </div>
  <el-dropdown class="taggleZn" >
    <span class="el-dropdown-link">
       <i class="iconfont icon-zhongyingwenqiehuan-yingwen" style="font-size: 26px;"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="setLanguage('zh')" :disabled="language == 'zh'">中文</el-dropdown-item>
        <el-dropdown-item @click="setLanguage('en')" :disabled="language == 'en'">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
            <!-- 全屏 -->
            <div class="fullscreen">
              <i @click="taggleFullscreen" v-if="!isFullscreen" class="iconfont icon-quanping" style="font-size:19px;" title="全屏"></i>
              <i @click="taggleFullscreen" v-else class="iconfont icon-tuichuzhuanhuan" style="font-size:19px;" title="退出全屏"></i>
            </div>
            <!-- 退出 -->
            <div class="exit">
              <el-button @click="exit">
                <template #icon>
                  <i style="font-size: 18px;" class="iconfont icon-tuichu"></i>
                </template>
                 退出
              </el-button>
            </div>
          </aside>
        </el-header>
        <!-- tab列表 -->
        <ul class="tabList">
          <div class="tab" v-for="e in tabList" :to="e.path" :kye="e.id">
            <el-tag 
              type="info"
              size="large" 
              :class="[e.isChecked? 'btn_active': 'btn']"
              :closable="e.id !== 1"
              @click="checkTag(e.id)"
              @close="closeTab(e)"
            >{{ $t(e.name) }}</el-tag>
          </div>
        </ul>
        <!-- 路由展示页面 -->
        <div class="roterView">
          <router-view #default="{ Component }">
              <keep-alive include="ManageData,Analysis,State,Message">
                <component :is="Component" />
              </keep-alive>
          </router-view>
        </div>
      </el-main>
    </el-container>
    </div>
</template>

<script lang="ts" setup>
function launchFullscreen(element) {
 if(element.requestFullscreen) {
  element.requestFullscreen();
 } else if(element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
 } else if(element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
 } else if(element.msRequestFullscreen) {
  element.msRequestFullscreen();
 }
}

function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 } else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
 } else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
 }
}
  import { ref,computed } from 'vue'
  import {useRouter} from "vue-router";
  let isCollapse = ref<boolean>(true) // 菜单栏是否展开了
  let router = useRouter()  // 路由对象

  const toggleCollpase = () => {
     isCollapse.value = !isCollapse.value
  }
  let activeIndex = computed(() => {
    return router.currentRoute.value.fullPath
 })

 /**右边工具栏 */
 import { moduleStore } from '../../store/module';

 let module_store = moduleStore()
 let {isFullscreen} = storeToRefs(module_store)
 const taggleFullscreen = () => {
      if (!isFullscreen.value) {
         launchFullscreen(document.documentElement)
         isFullscreen.value = true
      } else {
          exitFullscreen()
          isFullscreen.value = false
      }
    }
 /* 菜单栏的渲染*/
 import {menuList} from "../../local/menuList"
 let noChildMenu = menuList.filter((item:any) => !item.hasOwnProperty("children"))
 let hasChildMenu = menuList.filter((item:any) => item.hasOwnProperty("children"))

 /**tab切换功能实现 */
 // 导入tab模块
 import {tabStore} from '../../store/tab'
 let tab_store = tabStore()
 import Tab from '../../until/tab'
 import { storeToRefs } from 'pinia';
let {tabList,titleList} = storeToRefs(tab_store)
 // 添加模块 (点击路由) => 添加绑定事件
 const addTab = (obj: any) => {
     let tab = new Tab(obj.id,obj.title,obj.path,obj.router)
      tab_store.addTab(tab)
 }
// 切换标签
const checkTag = (id:number) => {
  tab_store.checkTab(id)
}
// 关闭标签
const closeTab = (e:any) => {
   tab_store.deleteTab(e)
}
// 报警未读消息
import { userStore } from '../../store/user';
let store = userStore()
let {indexDbNum,errList} = storeToRefs(store)
import { adminStore } from '../../store/admin';
let admin_store = adminStore()
let {isOpenDrawer} = storeToRefs(admin_store)
import { getCurrentInstance } from 'vue';
let {proxy} = getCurrentInstance()  
import indexDb from '../../local/indexDb';
// 打开报警列表
const openErrorList = async () => {
  isOpenDrawer.value = true
  let result:any = await indexDb.getAllData("errorList")
  errList.value = result.slice(0,10)
}
// 提醒用户没有报警
const noError = () => {
  proxy.$message.info("没有报警信息")
}
// 退出后台
const exit = () => {
  router.push("/")
  tabList.value = [{
    id: 1,
    path: "/admin",
    name: "首页",
    isChecked: true,
    router: [
        {title: "首页",path: "/admin"}
    ]
  }]
}

/**中英文切换 */
import {useI18n} from 'vue-i18n'
const { t } = useI18n()
import { useConfigStore } from '../../store/config';
let config_store = useConfigStore()
let { language } = storeToRefs(config_store)

const setLanguage = (lang:string) => {
  config_store.setLanguage(lang)
}
</script>

<style lang="less" scoped>
 .el-sub-menu__title span {
      margin-left: 15px;
 }
  
    /**菜单属性 */
   .el-menu {
      height: calc(100% - 80px)!important;
      background-color: #304156;
      .el-menu-item {
         .el-icon {
          margin-right: 25px;
         }
      }
   }

   /**按钮的激活属性和正常属性 */
   .btn {
     color: #000;
     border: none;
     border:none;
     padding: 7px 20px;
     text-decoration: none;
   }
   .btn_active {
     background-color: #42b983;
     .btn;
     color: #fff;
     &::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      margin-right: 5px;
     }
   }
   
  .container {
    background-color: #eff1f4;
    width: 100%;
    height: 100%;
    .el-container {
      height: 100%;
      .el-aside {
        background-color: #304156;
        
        .sidebar-header {
          height: 80px;
          background-color: #2c3e50;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid #34495e;
          
          .sidebar-logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 10px;
            
            .sidebar-logo {
              width: 70px;
              object-fit: contain;
              border-radius: 8px;
              transition: all 0.3s ease;
              margin-bottom: 8px;
              
              &:hover {
                transform: scale(1.05);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
              }
            }
            
            .sidebar-title {
              font-size: 14px;
              font-weight: 600;
              color: #ecf0f1;
              text-align: center;
              letter-spacing: 0.5px;
              line-height: 1.2;
              transition: all 0.3s ease;
              
              &:hover {
                color: #3498db;
              }
            }
          }
        }
        
        // 收缩状态下的样式
        &[style*="width: 65px"] {
          .sidebar-header .sidebar-logo-container .sidebar-logo {
            width: 40px;
            height: 40px;
            margin-bottom: 0;
          }
        }
      }
      .el-side {
        width: 200px;
      }
      .el-main {
        padding: 0;
        
        .el-header {
          height: 73px;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          padding-right: 0px;
          /**标题 */
          aside {
            height: 100%;
            align-items: center;
            display: flex;
            width: 30%;
            &:last-child {
              width: 200px;
              display: flex;
              justify-content: flex-end;
              i {
                color: #5a5e66;
                &:hover {
                  cursor: pointer;
                }
              }
              .exit {
                margin-left: 10px;
              }
              .info {
                margin-right: 10px;
                padding: 10px;
              }
            }
            .el-button {
              margin-right: 20px;
            }
          }
        }

        /**tab列表切换 */
        .tabList {
          height: 65px;
          background-color: #fff;
          border-top: 2px solid silver;
          border-bottom: 2px solid silver;
          display: flex;
          align-items: center;
          padding: 10px 20px;
          .tab {
            margin-right: 20px;
          }
        }
        /**路由加载页面 */
        .roterView {
          width: 100%;
          height: calc(100% - 120px);
          background: #fff;
        }
      }
    }
  }

  /**中文切换 */
  .taggleZn {
    padding-left: 3px;
    padding-right: 20px;
  }
</style>